import QtQuick 2.7
import QtQuick.Layouts 1.3
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.1
import QtQuick.Controls.Styles 1.3
import QtGraphicalEffects 1.0
Item {
//    y: hPadding
    width: view.width;
    height: view.height;

    Rectangle{
        id:header_1;
        width: parent.width;
        height: dp(28);
        color: "#ff6565";
        z:1;
        Rectangle{
            id:page_1_top_1;
            height: parent.height;
            width: parent.width / 12 *2;
            color: "#ff6565";
            Text
            {
                id:page_1_top_bottom;
                text: "全国";
                font.pixelSize: dp(10);
                anchors.verticalCenter: parent.verticalCenter;
                leftPadding: dp(1);
                color: "#fff";
            }
            Text
            {
                font.family: "FontAwesome";
                font.pixelSize: dp(16);
                text: "\uf107";
                color: "#fff";
                anchors.verticalCenter: parent.verticalCenter;
                anchors.left: page_1_top_bottom.right;
            }
        }
        Rectangle
        {
            id:page_1_top_2;
            width: parent.width / 12 * 8;
            height: dp(20);
            color: "white";
            anchors.left: page_1_top_1.right;
            anchors.top: parent.top;
            anchors.topMargin: dp(4);
            radius: dp(3);
            Text
            {
                font.family: "FontAwesome";
                text: "\uf002";
                font.pixelSize: dp(10);
                color: "#808080";
                font.weight:Font.Bold;
                anchors.right:page_1_top_2_text_2.left;
                anchors.rightMargin: dp(3);
                anchors.verticalCenter: parent.verticalCenter;
            }
            Text
            {
                id:page_1_top_2_text_2;
                anchors.centerIn: parent;
                text: "请输入查询的关键字";
                color: "#808080";
                font.pixelSize: dp(10);
            }
        }
        Rectangle
        {
            id:page_1_top_3;
            width: parent.width / 12 *2;
            height: parent.height;
            color: parent.color;
            anchors.left: page_1_top_2.right;
            Text
            {
                id:page_1_top_3_text_1;
                text: "筛选";
                font.pixelSize: dp(10);
                color: "#fff";
                anchors.verticalCenter: parent.verticalCenter;
                leftPadding: dp(1);
            }
            Text
            {
                font.family: "FontAwesome";
                text: "\uf0dc";
                font.pixelSize: dp(11);
                color: "#fff";
                anchors.verticalCenter: parent.verticalCenter;
                leftPadding: dp(2);
                anchors.left: page_1_top_3_text_1.right;
            }
        }
    }
    Flickable
    {
        anchors.top:header_1.bottom;
        contentWidth: parent.width;
        contentHeight: dp(750);
        height: dp(300);
        width: parent.width;
        Rectangle
        {
            id:flash_1;
            anchors.top:parent.top;
            height: dp(100);
            width: parent.width;
            Image
            {
               width: parent.width;
               height: parent.height;
               source: "qrc:/image/home/image/Home/flash-1.png";
            }
        }
        ListModel
        {
            id:node_tab;
            ListElement{node_text:"绘画";image:"qrc:/image/home/image/Home/huihua.png"}
            ListElement{node_text:"才艺";image:"qrc:/image/home/image/Home/gechang.png"}
            ListElement{node_text:"乒乓球";image:"qrc:/image/home/image/Home/Pingpang.png"}
            ListElement{node_text:"美甲";image:"qrc:/image/home/image/Home/meijia.png"}
            ListElement{node_text:"摄影";image:"qrc:/image/home/image/Home/shexiang.png"}
            ListElement{node_text:"家教";image:"qrc:/image/home/image/Home/jiajiao.png"}
            ListElement{node_text:"手工";image:"qrc:/image/home/image/Home/shougong.png"}
            ListElement{node_text:"法律咨询";image:"qrc:/image/home/image/Home/falvzixun.png"}
            ListElement{node_text:"商家服务";image:"qrc:/image/home/image/Home/shangjiafuwu.png"}
            ListElement{node_text:"代驾";image:"qrc:/image/home/image/Home/daijia.png"}
        }
        Rectangle
        {
            id:iconNavBody;
            anchors.top:flash_1.bottom;
            width: parent.width;
            height: dp(110);
            color: "#ff6565";

            GridLayout
            {
                rows:0;
                columns: 5;
                columnSpacing: 0;
                anchors.fill: parent;
                rowSpacing:dp(-10);
                Repeater
                {
                   model: node_tab;
                   Rectangle
                   {
                       Layout.fillWidth:true;
                       height: dp(45);
                       color: parent.parent.color;
                       Image
                       {
                           width: dp(23);
                           height: width;
                           source: image;
                           anchors.horizontalCenter:parent.horizontalCenter;
                           anchors.top:parent.top;
                           anchors.topMargin: dp(8)
                       }
                       Text
                       {
                           text:node_text;
                           anchors.horizontalCenter: parent.horizontalCenter;
                           anchors.bottom: parent.bottom;
                           color: "#ffe6e6";
                           font.pixelSize: dp(10);
                       }
                   }

                }
            }
        }
        TabBar{
            id:home_service_case;
            anchors.top:iconNavBody.bottom;
            anchors.topMargin: dp(3);
            height: dp(25);
            width: parent.width;
                Repeater
                {
                    model: ["技能服务",'求组任务'];
                    TabButton
                    {
                        width: parent.parent.width/2;
                        height: home_service_case.height;
                        padding: 0
                        contentItem:Text {
                            text: modelData;
                            color: (home_service_case.currentIndex==index)?"#ff626d":"#5b5b5b";
                            font.pixelSize: dp(10);
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter

                        }
                        background:Rectangle
                        {
                            width: parent.width;
                            height: parent.height;
                            color:"white";
                        }
                        onClicked:
                        {
                            //切换tab 下划线动画延迟
                            bottomLine.x=home_service_case.currentItem.x;
                        }
                    }
                }
        }
        Rectangle
        {
            id:bottomLine;
            anchors.bottom:home_service_case.bottom;
            width: home_service_case.currentItem.width;
            height: dp(1);
            color: "#ff626d";
            z:1;
            Behavior on x {PropertyAnimation {duration: 200} }
        }
        Rectangle
        {
            anchors.top:home_service_case.top;
            width: home_service_case.width;
            height: dp(1);
            color: "#eeeeee";
        }
        Rectangle
        {
            anchors.top:bottomLine.top;
            width: home_service_case.width;
            height: dp(1);
            color: "#eeeeee";
        }
        TabBar
        {
            id:home_servie_conetnt;
            width: parent.width;
            height: dp(20);
            anchors.top:home_service_case.bottom;
            anchors.topMargin: dp(5);
            anchors.left: parent.left;
            anchors.leftMargin: dp(10)
            z:2;
            Repeater
            {

                model: ["距离","最新","最热","推荐"];
                TabButton
                {

                    width: dp(50);
                    height: home_servie_conetnt.height;
                    contentItem: Text
                    {
                        text:modelData;
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        color:(home_servie_conetnt.currentIndex==index)?"white":"#656565";
                    }
                    background: Rectangle
                    {
                        width: parent.width;
                        height: parent.height;
                        color:(home_servie_conetnt.currentIndex==index)?"#ff6565":"white";
                        radius:dp(10);
                        border.color:(home_servie_conetnt.currentIndex==index)?"white":"#e5e5e5";
                    }
                }
            }
        }
        ListModel
        {
            id:articleList;
            //sex 1男 2女 0 未设置
            //username 用户名
            //headImage 头像
            //sendTime 发布时间
            //title 标题
            //texts 文章内容
            //iamgeList 图片列表
            //catNumber 查看数
            ListElement
            {
                username:"Robin";
                status:"1";
                sex:1;
                headImage:"http://img2.woyaogexing.com/2017/12/15/21f96fea84cefa08!400x400_big.jpg";
                sendTime:"";
                title:"商业摄影";
                texts:"一片落霞孤鸿的眷恋中，依依送别秋水长天的一程相逢。一篱冬阳，隔开季节分明的两端；冬，就这么悄无声息地来在身边……";
                iamgeList:"ss";
                catNumber:15;
                imageCount:3;
            }
            ListElement
            {
                username:"Robin";
                status:"0";
                sex:1;
                headImage:"http://img2.woyaogexing.com/2017/12/15/68ce2136b8fb78e4!400x400_big.jpg";
                sendTime:"";
                title:"商业摄影";
                texts:"光阴不懂人情，竟自流转，然而我们心底终有些撇不清的东西，留在了逝去的时光里。下一个轮回久远的重逢之约，又开启了新一轮的期盼与等待。秋去冬来的日子，生命愈发深邃厚重；凝眸时令清旷的边缘，心持一份前尘的留恋，秋意与冬情交接的时刻，我们含笑见证。";
                iamgeList:"ss";
                catNumber:15;
                imageCount:1;
            }
            ListElement
            {
                username:"Robin";
                status:"0";
                sex:2;
                headImage:"http://img2.woyaogexing.com/2017/12/15/eb8dcb28affd4ed9!400x400_big.jpg";
                sendTime:"";
                title:"商业摄影";
                texts:"test";
                iamgeList:"test";
                catNumber:15;
                imageCount:6;
            }
        }
        Component
        {
            id:listViewModel;
            Item
            {
                width: homeArtList.width;
                height: textContent.contentHeight>dp(80)?textContent.contentHeight+(dp(10)+imagelist.height):(imageCount?textContent.contentHeight+dp(20):dp(80))+imagelist.height;
                Column
                {
                    Rectangle
                    {
                        width: parent.parent.width;
                        height: parent.parent.height

                        Rectangle
                        {
                            id:headerMask;
                            width: dp(30);
                            height: width;
                            radius: height/2;
                            visible: false;

                        }
                        Image
                        {
                            id:headerImage;
                            width: headerMask.width;
                            height: width;
                            source: headImage;
                            visible:false;

                        }

                        OpacityMask
                        {
                            id:headerImageTmp;
                            width: headerMask.width;
                            height: width;
                            source:headerImage;
                            maskSource:headerMask;
                            anchors.left: parent.left;
                            anchors.leftMargin: dp(10);

                        }
                        Text
                        {
                            id:usernames;
                            text:username;
                            anchors.horizontalCenter: headerImageTmp.horizontalCenter;
                            anchors.top: headerImageTmp.bottom;
                            anchors.topMargin: dp(2);
                            font.pixelSize: dp(10);
                            color: "#303030";
                        }
                        Rectangle
                        {
                            width: dp(30);
                            height: dp(10);
                            color: "#a0d44e";
                            anchors.horizontalCenter: usernames.horizontalCenter;
                            anchors.top:usernames.bottom;
                            anchors.topMargin: dp(2);
                            radius: dp(2);
                            visible: status==1?true:false;
                            Text
                            {
                                text:status==1?"已认证":"未认证";
                                anchors.centerIn: parent;
                                color: "#f9fcf6";
                                font.pixelSize: dp(8);
                            }

                        }
                        Rectangle
                        {
                            width: dp(10);
                            height:width;
                            color: sex==1?"#67b0fa":"#fe7f7f";
                            radius:height/2;
                            anchors.right: headerImageTmp.right;
                            anchors.bottom: headerImageTmp.bottom;
                            Text
                            {
                                font.family:"FontAwesome";
                                text:sex==1?"\uf222":"\uf221";
                                anchors.centerIn: parent;
                                color: "white";
                                font.pixelSize: dp(8);

                            }
                        }
                        Text
                        {
                            id:textContent;
                            anchors.top:headerImageTmp.top;
                            text:texts;
                            anchors.left: headerImageTmp.right;
                            anchors.leftMargin: dp(10);
                            font.pixelSize: dp(12);
                            width: parent.width-(dp(20)+headerImageTmp.width)-dp(10);
                            wrapMode:Text.Wrap;
                            color: "#404040";
                        }
                        GridLayout
                        {
                            id:imagelist;
                            anchors.top:textContent.bottom;
                            anchors.topMargin: dp(10);
                            anchors.left: textContent.left;
                            rows:2;
                            columns: 3;
                            width: textContent.width;
                            columnSpacing:dp(3);
                            rowSpacing : dp(3);
                            Repeater
                            {
                                model: imageCount;
                                Rectangle
                                {
                                    id:imageback;
                                    Layout.fillWidth:true;
                                    Layout.maximumWidth:imageCount>2?imagelist.width/3:dp(150);
                                    Layout.maximumHeight: Layout.maximumWidth;
                                    Layout.minimumHeight: imageCount>2?imagelist.width/3:dp(150);
                                    height: parent.width/3;
                                    color: "#f4f4f4";

                                    Image
                                    {
                                        id:isimage;
                                        anchors.fill: parent;
                                        source: "http://img.ivsky.com/img/tupian/co/201709/17/malaxiaolongxia-001.jpg"

                                    }
                                    MouseArea
                                    {
                                        anchors.fill: parent;
                                        onClicked:
                                        {
                                            showImage(isimage);
                                        }
                                    }
                                }
                            }


                        }

                    }
                }
            }
        }
        ListView
        {
            id:homeArtList;
            anchors.top:home_servie_conetnt.bottom;
            anchors.topMargin: dp(10);
            width: parent.width;
            height: dp(1200);
            model:articleList;
            delegate:listViewModel;
            clip: true;
        }
    }
    function showImage(item)
    {
        bar.visible=false;
        showimageBack.visible=true;
        homeArtList.visible=false;
        showimageBack.image=item.source;

    }
    Rectangle
    {
        id:showimageBack;
        width: parent.width;
        height: parent.height+bar.height;
        z:9;
        visible: false;
        property var image: "";
        Image
        {

            anchors.fill: parent;
            source: parent.image;
        }
        MouseArea
        {
            anchors.fill: parent;
            onClicked:
            {
                bar.visible=true;
                showimageBack.visible=false;
                homeArtList.visible=true;
                showimageBack.image="";
            }
        }
    }
}
